<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { addAdminAPI, editAdminAPI } from "@/api/destribute.ts";
import { ElMessage } from "element-plus"
import type { FormInstance } from 'element-plus'
import { getRoleAPI } from "@/api/permission.ts";

interface RoleType {
  _id: string,
  name: string
}
const dialogAddAdminVisible = ref(false)
const emits = defineEmits(['getAdminList'])
const typeRef = ref()
const adminRef = ref()
const formRef = ref()
const roleList = ref<RoleType[]>([])
const id = ref()
const adminForm = reactive({
  name: '',
  phone: '',
  password: '',
  role: ''
})

// 初始方法
const init = (row: any, type: any) => {
  dialogAddAdminVisible.value = true
  typeRef.value = type
  id.value = row._id
  if(type === 0) {
    adminRef.value = ''
    adminForm.name = ''
    adminForm.phone = ''
    adminForm.password = ''
    adminForm.role = ''
  }else {
    adminRef.value = row.role.name
    adminForm.name = row.name
    adminForm.phone = row.phone
    adminForm.password = row.password
    adminForm.role = row.role._id
  }
}

// 获取角色列表
const getRoleList = async () => {
  const res = await getRoleAPI('1')
  roleList.value = res.data.filter(item => {
    // if(item.name !== '超级管理员'){
      return item.name
    // }
  })
}

// 添加管理员
const handleCommit = async () => {
  const res = await addAdminAPI(adminForm)
  ElMessage({
    type: res.code === 0 ? 'success' : 'error',
    message: '添加成功'
  })
  emits('getAdminList')
  dialogAddAdminVisible.value = false
}

// 编辑管理员
const handleChange = async () => {
  const res = await editAdminAPI(id.value, adminForm)
    ElMessage({
      type: res.code === 0 ? 'success' : 'error',
      message: '修改成功'
    })
  emits('getAdminList')
  dialogAddAdminVisible.value = false
}

// 重置表单
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

// 关闭
const handleClose = () => {
  dialogAddAdminVisible.value = false
  resetForm(formRef.value)
}

defineExpose({
  init
})

onMounted(() => {
  getRoleList()
})
</script>

<template>
  <el-dialog :close-on-click-modal="false" v-model="dialogAddAdminVisible" :title="typeRef === 0 ? '添加管理员' : '编辑管理员'">
    <el-form
      ref="formRef"
      :model="adminForm"
      status-icon
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="姓名" prop="name">
        <el-input v-model="adminForm.name" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="adminForm.phone" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="密码" prop="password" v-show="typeRef === 0">
        <el-input v-model="adminForm.password" type="password" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="角色" v-show="adminRef !== '超级管理员'">
        <el-select v-model="adminForm.role">
          <el-option v-for="item in roleList" :key="item._id" :label="item.name" :value="item._id"/>
        </el-select>
      </el-form-item>
<!--      <el-form-item label="验证码" prop="code">-->
<!--        <div class="row">-->
<!--          <el-input v-model="adminForm.code"/>-->
<!--          <el-button type="primary" style="margin-left: 20px" @click="adminForm.code = '123456'">获取验证码</el-button>-->
<!--        </div>-->
<!--      </el-form-item>-->
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button v-if="typeRef === 0" type="primary" @click="handleCommit">确认</el-button>
      <el-button v-else type="primary" @click="handleChange">修改</el-button>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">

</style>
